﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script src="../../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../js/highcharts.js"></script>
    <script src="../../js/modules/exporting.js"></script>
    <script type="text/javascript">
        var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: []
        };

        $(document).ready(function () {
            if (setTimeID != null)
                clearTimeout(setTimeID);
            requestData(0);
        });

        var setTimeID;
        function requestData(i) {
            var data = "[{name:'Tokyo" + i + "',data:[29.2,27.8,29.0,31.4,27.8,27.2,25.2,27.8,29.0,31.4,27.8,27.5]},{name:'BeiJing',data:[27.2,23.8,22.0,31.4,26.8,22.5,25.2,22.8,22.0,14.4,17.8,26.5]}]";
            var list = eval("(" + data + ")");
            options.series = list;
            var chart = new Highcharts.Chart(options);
            i++;
            setTimeID = setTimeout("requestData(" + i + ")", 10000);
        }
        
    </script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
    </div>
</body>
</html>
